<template>
	<div class="header">
		<image class="avatar" :src="userInfo['avatar'] || $surl('/avatar.png')" mode="aspectFill"></image>
		<view class="header-more">
			<view class="nickname">{{ userInfo['nickname'] }}</view>
			<div class="more-data">
				<text>{{ userInfo.like_count }} 赞</text>
				<text>{{ userInfo.collection_count }} 收藏</text>
				<text>{{ userInfo.publish_count }} 动态</text>
				<text>{{ userInfo.comment_count }} 评论</text>
			</div>
		</view>
	</div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useUserStore } from '@/store/user.js'
import { onShow } from '@dcloudio/uni-app'

const test = uni.$uv.test;
const userStore = useUserStore()

const userInfo = computed(() => userStore.userInfo);

onShow(() => {
	userStore.init();
})
</script>

<style lang="scss" scoped>
.header {
	display: flex;
	align-items: center;
	padding: 0 $side-width;
	background: #fff;
	height: 200rpx;

	.avatar {
		width: 132rpx;
		height: 132rpx;
		border-radius: 50%;
	}

	.header-more {
		display: flex;
		justify-content: center;
		flex-direction: column;
		margin-left: $side-width;
		height: 132rpx;

		.nickname {
			font-size: 32rpx;
			font-weight: 500;
		}

		.more-data {
			display: flex;
			flex-direction: row;
			align-items: center;

			text {
				color: $uv-tips-color;
				font-size: 28rpx;
				margin-top: 16rpx;
				margin-right: $side-width;

				&:last-child {
					margin-right: 0;
				}
			}
		}
	}
}
</style>